<template>
    <div class="UPInformation">
        <div class="InfLeft">
            <el-image
                style="width: 200px; height: 100px"
                :src="url"
                fit="contain">
            </el-image>
        </div>
        <div class="InfRight">
            <span>{{ `${this.InformationData.title}` }}</span>
            <span>简介: {{ this.InformationData.synopsis }} </span>
            <span>发布于: {{ this.InformationData.time }}</span>
            <div>
                <!-- 播放、点赞、投币、收藏、评论、弹幕 -->
                <i class="el-icon-video-play">播放:{{ this.InformationData.playback }}</i> 
                <i class="el-icon-check">点赞:{{ this.InformationData.like }}</i>
                <i class="el-icon-circle-check">投币:{{ this.InformationData.tipping }}</i>
                <i class="el-icon-folder-add">收藏:{{ this.InformationData.collection }}</i>
                <i class="el-icon-chat-dot-square">评论:{{ this.InformationData.comments }}</i>
                <i class="el-icon-chat-round">弹幕:{{ this.InformationData.barrage }}</i>
                <!-- 子组件添加监听事件，监听父组件scope.id的变化 -->
            </div>
        </div>
    </div>
</template>

<script>
import api from '../../../api/index.js';
export default {
    props:{
        InformationId:{
            type:Number,
            default: () => ({})
        }
    },
    components:{},
    data(){
        return{
            InformationIndex:0,
            InformationData:{},
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
    },
    watch:{
        InformationId(newVal, oldVal){
            const _this = this;
            const param = newVal;
            // 判断
            if ( param !== oldVal){
                _this.InformationIndex = param
            } else {
                console.log('子组件watch没有更新');
            }
            // 获取数据
            this.getTableData()
        }
    },
    methods:{
        // 实验函数
        init(){
            console.log('子InformationId',this.InformationId);
        },
        initInformationData(){
            this.Information = this.InformationData.Information
        },
        // 拿表格数据
        getTableData(){
            this.InformationIndex = this.InformationId
            api.xuData.getVideoTableData().then((res)=> {
                // 将数据赋值给tableData
                this.InformationData = res.data[this.InformationIndex-1].Information;
            }).catch(error => {
                // loading.close()
                this.$message({
                    message: error.message,
                    type: 'error'
                })
            })
        },
    },
    mounted(){
        this.getTableData()
        this.initInformationData()
    }
};
</script>

<style scoped>
.UPInformation{
    margin: 0;
    padding: 0;
    width: 520px;
    height: 120px;
    border: 1px solid black;
    display: flex;
}
.InfLeft{
    width: 170px;
    height: 120px;
    transform:translateY(10%)translateX(-10%);
}
.InfRight{
    display: flex;
    flex-direction: column;
    height: 120px;
    transform:translateY(15%);
}

</style>